<template>
    <div class="chat-container">
      <div class="chatlist">
        <ChatList :list="privateChatList" @select-chat="selectChat" />
      </div>
      <div class="chatbox">
        <ChatBox v-if="selectedChat" :chat="selectedChat" />
      </div>
    </div>
  </template>
  
  <script>
  import ChatList from './chat-list';
  import ChatBox from './chat-box';
  
  export default {
    components: {
      ChatList,
      ChatBox
    },
    data() {
      return {
        privateChatList: [
          { id: 1, name: '好友1' },
          { id: 2, name: '好友2' }
        ],
        selectedChat: null
      };
    },
    methods: {
      selectChat(chat) {
        this.selectedChat = chat;
      }
    }
  };
  </script>
  
  <style scoped>
  .chat-container {
    display: flex;
    height: 100%;
  }
  .chatlist {
    width: 33%;
    border-right: 1px solid #e6e6e6;
    padding: 10px;
  }
  .chatbox {
    width: 67%;
    padding: 10px;
  }
  </style>